<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Custom SpinWheel</title>

	<script type="text/javascript" src="../../../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','SpinWheel']"></script>
	<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
			"dojo/dom-construct", // dojo.place
			"dojo/ready", // dojo.ready
			"dijit/registry",  // dijit.byId
			"doh/runner",	//doh functions
			"dojox/mobile/SpinWheel",
			"dojox/mobile/SpinWheelSlot",
			"dojox/mobile",				// This is a mobile app.
			"dojox/mobile/View",		// This mobile app uses mobile view
			"dojox/mobile/compat",		// This mobile app supports running on desktop browsers
			"dojox/mobile/parser"		// This mobile app uses declarative programming with fast mobile parser
		], function(domConst, ready, registry, runner, SpinWheel, SpinWheelSlot){
			ready(function(){
				var view = registry.byId("view1");
				var demoWidget = new SpinWheel({id:"spin1"});
				demoWidget.placeAt(view.containerNode);
				
				// No initial value specified
				var slot0 = new SpinWheelSlot({labels:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'], 
					style:"text-align:center;width:40px;"});
				slot0._valueBeforeStartup = slot0.get("value");
				slot0._keyBeforeStartup = slot0.get("key");
				demoWidget.addChild(slot0);
				
				// Initial value: C
				var slot1 = new SpinWheelSlot({labels:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'], 
					value:'C', style:"text-align:center;width:40px;"});
				demoWidget.addChild(slot1);

				// No initial value specified
				var slot2 = new SpinWheelSlot({labelFrom:3000, labelTo:3100, style:"width:70px;"});
				demoWidget.addChild(slot2);
				
				// Initial value: 3009 
				var slot3 = new SpinWheelSlot({labelFrom:3000, labelTo:3100, value:3009, style:"width:70px;"});
				demoWidget.addChild(slot3);

				domConst.create("div", {className: "mblSpinWheelSlot", id:"pt"}, demoWidget.containerNode);
				domConst.create("div", {className: "mblSpinWheelSlot", id:"txt", innerHTML:"."}, demoWidget.containerNode);

				var slot4 = new SpinWheelSlot({labelFrom:0, labelTo:9, style:"width:30px;"});
				demoWidget.addChild(slot4);

				var slot5 = new SpinWheelSlot({labels:['pt','px','cm'], style:"width:50px;"});
				demoWidget.addChild(slot5);

				var slot6 = new SpinWheelSlot({
					labels:[
					'<img src=../../images/i-icon-1.png>',
					'<img src=../../images/i-icon-2.png>',
					'<img src=../../images/i-icon-3.png>',
					'<img src=../../images/i-icon-4.png>',
					'<img src=../../images/i-icon-5.png>',
					'<img src=../../images/i-icon-6.png>',
					'<img src=../../images/i-icon-7.png>',
					'<img src=../../images/i-icon-8.png>',
					'<img src=../../images/i-icon-9.png>',
					'<img src=../../images/i-icon-10.png>'
					],
					style:"width:70px;text-align: center;"
				});
				demoWidget.addChild(slot6);

				var slot7 = new SpinWheelSlot({
					items:[
						['key1', 'value1'], 
						['key2', 'value2'],
						['key2', 'value2']
					],
					value:'value2',
					style:"text-align:center;width:40px;"});
				demoWidget.addChild(slot7);

				demoWidget.reset();
			});
		})
	</script>

	<script type="text/javascript">
		require([
			"dojo/ready", // dojo.ready
			"dijit/registry",  // dijit.byId
			"doh/runner",	//doh functions
			"dojox/mobile/SpinWheel",
			"dojox/mobile/SpinWheelSlot",
			"dojox/mobile",				// This is a mobile app.
			"dojox/mobile/View",		// This mobile app uses mobile view
			"dojox/mobile/compat",		// This mobile app supports running on desktop browsers
			"dojox/mobile/parser"		// This mobile app uses declarative programming with fast mobile parser
		], function(ready, registry, runner, SpinWheel, SpinWheelSlot){
			ready(function(){
				
				var testEmptySlot = function(emptySlot){
					// Test for the edge-case of slots with no items. 
					// Mainly checks that no error is thrown.
					emptySlot.setInitialValue();
					emptySlot.resize();
					doh.assertEqual("", emptySlot.get("value"));
					emptySlot.set("value", "some value"); // no-op for empty slot
					doh.assertEqual("", emptySlot.get("value"));
				};
				
				runner.register("dojox.mobile.test.doh.SpinWheel", [
					{
						name: "SpinWheel Verification",
						timeout: 4000,
						runTest: function(){
							var d = new runner.Deferred();
							setTimeout(d.getTestCallback(function(){
								var demoWidget = registry.byId("spin1");
								var slots = demoWidget.getSlots();
								doh.assertEqual('A', slots[0].get("value"));
								doh.assertEqual('C', slots[1].get("value"));
								doh.assertEqual('3000', slots[2].get("value"));
								doh.assertEqual('3009', slots[3].get("value"));
								doh.assertEqual('0', slots[4].get("value"));
								doh.assertEqual('pt', slots[5].get("value"));
								doh.assertEqual('<img src=../../images/i-icon-1.png>', slots[6].get("value"));
								doh.assertEqual('value2', slots[7].get("value"));
								doh.assertEqual('A', slots[0]._valueBeforeStartup);
								doh.assertEqual(0, slots[0]._keyBeforeStartup);
								
								// Test case for #16519
								var noError = true; 
								var slot8 = new SpinWheelSlot({
									items:[
										['key1', 'value1'], 
										['key2', 'value2'],
										['key2', 'value2']
									],
									value:'value2',
									style:"text-align:center;width:40px;"});
								try{
									slot8.disableValues(2);
								}catch(error){
									noError = false;
								}
								doh.assertTrue(noError, "Calling SpinWheelSlot.disableValues shouldn't throw an exception!");
								
								// Test case for #16701 (support for the edge-case of empty slots)
								// (without the fix of #16701, leads to infinite loop)
								testEmptySlot(new SpinWheelSlot({
									items:[] // empty
								}));
								testEmptySlot(new SpinWheelSlot({
									labels:[] // empty 
								}));
								testEmptySlot(new SpinWheelSlot()); // empty
							}),2000);
							return d;
						}
					}
				]);
				runner.run();
			});
			
		})
	</script>

	<style>
	#spin1 {
		width: 304px;
		margin: 10px auto;
	}
	#pt {
		width: 20px;
	}
	#txt {
		width: 10px;
		margin-left: -15px;
		padding-top: 85px;
		font-size: 24px;
		font-weight: bold;
		border: none;
	}
	</style>
</head>
<body style="visibility:hidden;">
	<div id="view1" data-dojo-type="dojox.mobile.View">
		<h1 data-dojo-type="dojox.mobile.Heading">Custom SpinWheel</h1>
	</div>
</body>
</html>
